How to Create a Lollipop Shape by Stacking Divs in a Circular Manner

How to create a lollipop shape by stacking divs in a circular manner?

I would create this considering two elements (pseudo elements) and multiple radial gradient. You only need to create half the shape twice and rotate one of them.

.box {
  width:150px;
  height:150px;
  border-radius:100%;
  border:1px solid;
  position:relative;
  overflow:hidden;
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:50%;
  background:
    /*we rotate by 30deg so will use :
       sin(30deg)*R = 0.5x75px   = 37.5px 
       cos(30deg)*R = 0.866x75px = 64.95px       
       10.05px = 75px - 64.95px;
       112.5px = 75px + 37.5px
       139.95px = 75px + 64.95px
       37.5px = 75px - 37.5px
       */
    radial-gradient(circle 75px at 139.95px 37.5px,red   98%,transparent 100%),
    radial-gradient(circle 75px at 112.5px 10.05px,white 98%,transparent 100%),
    radial-gradient(circle 75px at 75px    0,      red   98%,transparent 100%),
    radial-gradient(circle 75px at 37.5px  10.05px,white 98%,transparent 100%),
    radial-gradient(circle 75px at 10.05px 37.5px ,red   98%,transparent 100%),
    radial-gradient(circle 75px at 0       75px,   white 98%,transparent 100%),
    radial-gradient(circle 75px at 10.05px 112.5px,red   98%,transparent 100%);
}

.box::after {
 transform:rotate(180deg);
 transform-origin:right;
}

<div class="box">

</div>

How to make radial gradients work in Safari?

To start with, your gradient can be simplified like below.

.box{ background:   radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent),   radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px); height:200px;}
body { background:blue;}

<div class="box">
</div>

Circle loading animation

Here's my effort. The conical gradient is an embedded bitmap image extracted by calculating the maximum value of each pixel in the animated GIF posted by the OP. A semi-opaque black windmill pattern is superimposed on top of that and animated, and a blur filter gets rid of the JPEG artefacts.

(Edit: Added a reflective highlight to make it look a bit more 3D)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="121" height="121" viewBox="0 0 121 121">  <defs>    <clipPath id="circ">      <circle r="60" cx="60.5" cy="60.5"/>    </clipPath>    <linearGradient id="shine" x1="0%" y1="0%" x2="0%" y2="100%">      <stop offset="0%" style="stop-color:#fff;stop-opacity:0.6" />      <stop offset="10%" style="stop-color:#fff;stop-opacity:0.3" />      <stop offset="20%" style="stop-color:#fff;stop-opacity:0.1" />      <stop offset="40%" style="stop-color:#fff;stop-opacity:0" />    </linearGradient>    <filter id="blur">      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>    </filter>  </defs>  <image width="121" height="121" filter="url(#blur)" xlink:href="data:image/jpeg;base64,  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  hIYYg5SFtM/cMbbeoFFHwc04MnGHKcXl/9k=" clip-path="url(#circ)" />  <g transform="translate(60.5,60.5)">    <path d="M0 0A56 56 0 0 0 0 56 56 56 0 0 0 32.916 45.305 56 56 0 0 1 0 0 56        56 0 0 0 53.259 17.305 56 56 0 0 0 53.259-17.305 56 56 0 0 1 0 0 56 56        0 0 0 32.916-45.305 56 56 0 0 0 0-56 56 56 0 0 1 0 0 56 56 0 0 0        -32.916-45.305 56 56 0 0 0-53.259-17.305 56 56 0 0 1 0 0 56 56 0 0 0        -53.259 17.305 56 56 0 0 0-32.916 45.305 56 56 0 0 1 0 0Z"        stroke="none" fill="#000" opacity="0.25" transform="rotate(0)">      <animateTransform attributeName="transform" type="rotate" from="0"          to="72" begin="0s" dur="0.6s" repeatCount="indefinite" />    </path>    <circle r="59" stroke="#000" stroke-width="2" fill="none" opacity="0.25" />    <circle r="55" fill="url(#shine)" stroke="none" />  </g></svg>

Trying to create a camera shutter effect with divs

it is much simpler to implement with svg

let r = 80,     arc = (x,y,s) => `A${r},${r},0,0,${s},${x},${y}`,    path = (i,d) => `<path transform='rotate(${i/+count.value*360})' ${d}></path>`;
function upd (val) {        let step = Math.PI*(0.5 + 2/+count.value);    let p1x = Math.cos(step)*r;     let p1y = Math.sin(step)*r;    let cos = Math.cos(-val);    let sin = Math.sin(-val);    let c1x = p1x - cos * p1x - sin * p1y;    let c1y = p1y - cos * p1y + sin * p1x;    let dx = - sin * r - c1x;    let dy = r - cos * r - c1y;    let dc = Math.sqrt(dx*dx + dy*dy);    let a = Math.atan2(dy, dx) - Math.acos(dc/2/r);    let x = c1x + Math.cos(a)*r;    let y = c1y + Math.sin(a)*r;        let edge = `M${p1x},${p1y}${arc(0,r,0)}${arc(x,y,1)}`;    edges.innerHTML = bodies.innerHTML = '';    for (let i = 0; i < +count.value; i++) {        edges.innerHTML += path(i, `fill=none stroke=black d='${edge}'`);        bodies.innerHTML += path(i, `fill=lightgray d='${edge}${arc(p1x,p1y,0)}'`);     }};
upd(0.5);
addEventListener('mousemove', e => upd(e.y/innerHeight*1.04));

<svg viewbox=-100,-100,200,200 style="height:90vh" id=svg>    <g id=bodies></g><g id=edges></g></svg><br><input id=count type=range min=2 max=13 value=5 style="position:absolute;top:2px">

How to make radial gradients work in Safari?

To start with, your gradient can be simplified like below.

.box{ background:   radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent),   radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px); height:200px;}
body { background:blue;}

<div class="box">
</div>

Do fixtures trigger model callbacks?

Is this how it is expected to work? If
so, why did they design it this way?

Yes, fixtures do not use callbacks. I'm assuming this is for performance reasons. It is quicker to load the data straight into the database without instantiating the model.

Is there a way to force the triggering
of the callbacks when loading
fixtures?

Not that I know of. You have a couple options. One is to build your fixtures as if the callbacks were already triggered. That is, manually create the data that the callbacks would. For example, if you have a callback which hashes a user's password you would need to hash the password manually and then store that hash in the fixture.

The second solution (and highly recommended!) is to use factories. Factories do trigger callbacks and allow you to use virtual attributes, etc. This is because they do instantiate the model each time. One popular gem is Factory Girl. Another one to try is Machinist. I have also created a Railscasts episode on the topic.

---

Related Topics