#HTML, 290235 290 295 354 347 bytes#
And I had high hopes that it would get shorter than this:
<a><style>body<a><style>*{position:relative;widthabsolute;margin:100px;height0;box-sizing:100pxborder-box}body{height:100vh;width:100vh}a{positionleft:absolute;left12.5%;top:12%;top50%;width:12%;animation75%;height:1px;border-left:1px solid purple;animation:r 60s infinite linear;transform-origin:50%50%;width:75%;height:75%}a:after{content:'';position:absolute;width:1px;height:1px;background:#800080linear}@keyframes r{100%{transform:rotate(360deg
This is a new version which is way shorter than my first attempt, that I had written 5 minutes before a meeting. The new size of the canvas is a square based on the viewport height. That works pretty well and is not restricted to a certain defined height. I'm very accurate about the settings in the challenge (75% size of its parent, purple and 1px). Therefore I need and can't discard or simplify the following rules:
* { margin: 0; box-sizing:border-box; }
a { left: 12.5%; }
Ungolfed
I'll leave this to aThis is the ungolfed version with clean markup:
<!DOCTYPE html>
<html>
<head>
<style>
body* {
position: relative;
width: 100px;
height: 100px;absolute;
}
abody {
positionmargin: absolute;0;
leftheight: 12px;100vh;
topwidth: 12px;100vh;
animation:r 60s infinite linear;}
transform-origin: 50%a 50%;{
widthleft: 75%;12.5%;
heighttop: 75%;
}50%;
awidth:after {75%;
contentheight: '';1px;
positionborder-left: absolute;1px solid purple;
widthbox-sizing: 1px;border-box;
heightanimation: 1px;
r 60s background:infinite #800080;linear;
}
@keyframes r {
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<a></a>
</body>
- Added 7 bytes -. I thought nobody would notice, that there's a default easing on the animation. ;) I've set it to
linear now.
- Saved 59 bytes by throwing everything abort that the browser will handle automatically.
- Saved 3 bytes by removing the trailing
)}}. Thanks to toothbrushtoothbrush.
- Saved 2 bytes by using
12% instead of 12px which is the same value corresponding to the size of the parent element.
- Saved 55 bytes due to massive refactoring, also taken a lot of comments into account. Thanks a lot for all the contributions.
